<template>
  <div class="demo-main">
    <div class="tool-bar">
      <span class="demo-switch-item" v-for="(item, index) in demoTypeOptions" :key="index">
        <span class="label">{{ item.name }}: </span>
        <span>
          <input type="checkbox" v-model="item.show" />
        </span>
      </span>
    </div>
    <div class="video-wrapper">
      <div class="video-player-demo" v-if="demoTypeOptions[0].show">
        <div>本地播放方案:</div>
        <UniVideoPlayer
          class="video-player"
          :videoUrl="videoUrl"
          :videoType="videoType"
          :osdInfo="osdInfo"
          :retryInterval="5"
          :videoServer="videoServer"
          :videoControlOptions="videoControlOptions" :debugConfig="debugConfig" />
      </div>
      <div class="video-player-demo" v-if="demoTypeOptions[1].show">
        <div>网络播放方案:</div>
        <UniVideoPlayer
          v-for="(url, index) in rtspVideoConfig.videoUrl"
          :key="`rtsp-network-${index}`"
          class="video-player"
          videoType="rtsp"
          :videoUrl="url"
          :videoServer="rtspVideoConfig.videoServer"
          :iceServer="rtspVideoConfig.iceServer"
          :videoControlOptions="videoControlOptions" />
      </div>
      <div class="video-player-demo" v-if="demoTypeOptions[2].show">
        <div>native播放方案</div>
        <UniVideoPlayer
          class="video-player"
          videoType="native"
          :videoUrl="nativeVideoConfig.videoUrl"
          :videoControlOptions="videoControlOptions" />
      </div>
      <div class="video-player-demo" v-if="demoTypeOptions[3].show">
        <div>播放flv</div>
        <UniVideoPlayer class="video-player" videoType="flv" :videoUrl="flvUrl" />
      </div>
      <div class="video-player-demo" v-if="demoTypeOptions[4].show">
        <div>萤石播放方案</div>
        <UniVideoPlayer class="video-player" videoUrl="" :yingShiVideoOption="yingShiVideoOption" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import UniVideoPlayer from "./packages/videoPlayer";
import {
  DebugConfig,
  IceServerOptions,
  OSDGroup,
  VideoControlOptions,
  VideoType,
  YingShiVideoOptions,
} from "./packages/videoPlayer/VideoPlay.types";

@Component({
  name: "App",
  components: {
    UniVideoPlayer,
  },
})
export default class App extends Vue {
  static components: {
    UniVideoPlayer: typeof UniVideoPlayer;
  };

  demoVideoUrls = [
    {
      videoUrl: "rtsp://192.168.0.236:5505/line6_alarm_demo1.avi",
      videoType: "rtsp",
    },
    {
      videoUrl: "rtsp://admin:jykj666666@192.168.2.113:554",
    },
  ];
  // rtsp://192.168.0.236:8554/xierqi_suitcase_short.avi
  videoUrl = "rtsp://192.168.0.236:8554/19-3-1-more.avi";
  videoType: VideoType = "rtsp_local";
  osdInfo: OSDGroup = {
    groupId: 1,
    osds: [
      {
        x: 100,
        y: 100,
        size: 36,
        text: "何小白65012",
        r: 255,
        g: 255,
        b: 255,
        alpha: 0.8,
        rotate: -45
      }
    ]
  }
  videoServer = "192.168.0.236:8083";
  // debug
  debugConfig: DebugConfig = {
    enable: false,
    saveDataLimit: 10 * 1024 * 1024,
  }

  //
  rtspVideoConfig = {
    //"rtsp://admin:jykj666666@192.168.2.113:554","rtsp://admin:jykj666666@192.168.3.114:554","rtsp://admin:jykj666666@192.168.4.115:554","rtsp://admin:jykj666666@192.168.5.116:554"
    videoUrl: [
      "rtsp://admin:jykj666666@192.168.2.113:554",
      // "rtsp://admin:jykj666666@192.168.3.114:554",
      // "rtsp://admin:jykj666666@192.168.4.115:554",
      // "rtsp://admin:jykj666666@192.168.5.116:554",
    ],
    videoServer: "47.104.249.34:9999",
    iceServer: [
      {
        urls: "stun:47.104.249.34:3478",
      },
      {
        urls: "turn:47.104.249.34:3478",
        username: "joy",
        credential: "joy",
      },
    ] as IceServerOptions[],
  };

  videoControlOptions: VideoControlOptions = {
    showControl: false,
  };

  nativeVideoConfig = {
    videoUrl: "/demo_video/test.mp4",
  };

  yingShiVideoOption: YingShiVideoOptions = {
    videoUrl: "ezopen://jykj666666@open.ys7.com/D52288025/1.live",
    auth: {
      appKey: "2417d99acec74167b41670b5728b9165",
      appSecret: "720a2b931fcb70bd9ef9d11ce865b8d0",
    },
  };
  //
  flvUrl = "http://47.104.249.34:80/live/test1.live.flv";

  demoTypeOptions = [
    {
      name: "本地rtsp",
      show: true,
    },
    {
      name: "网络rtsp",
      show: false,
    },
    {
      name: "native",
      show: false,
    },
    {
      name: "flv",
      show: false,
    },
    {
      name: "萤石",
      show: false,
    },
  ];
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.demo-switch-item + .demo-switch-item {
  margin-left: 1em;
}

.video-wrapper {
  display: flex;
  height: 100%;
  width: 100%;
  flex-flow: wrap;
}

.video-player-demo {
  flex: 0;
  padding: 10px;
  width: 50%;
}

.video-player {
  background: black;
  height: 400px;
  width: 600px;
}
</style>
